@if (!givenName) {
  <h1>Welcome!</h1>
}
@if (givenName) {
  <h1>Welcome, {{ givenName }} {{ familyName }}!</h1>
}

<div class="panel panel-default">
  <div class="panel-body">
    <p>Login with Username/Password</p>

    @if (loginFailed) {
      <p style="color:red; font-weight:bold">
        Login wasn't successfull.
      </p>
    }

    <div class="form-group">
      <label>Username</label>
      <input class="form-control" [(ngModel)]="userName" />
    </div>
    <div class="form-group">
      <label>Password</label>
      <input class="form-control" type="password" [(ngModel)]="password" />
    </div>
    <div class="form-group">
      <button class="btn btn-default" (click)="loginWithPassword()">
        Login
      </button>
      <button class="btn btn-default" (click)="logout()">Logout</button>
    </div>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-body"><b>Username/Password:</b> max/geheim</div>
</div>

<div class="panel panel-default">
  <div class="panel-body">
    <p><b>access_token_expiration:</b> {{ access_token_expiration }}</p>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-body">
    <p><b>access_token:</b> {{ access_token }}</p>
    @if (userProfile) {
      <div>
        <b>user profile:</b>
        <pre>{{ userProfile | json }}</pre>
      </div>
    }
  </div>
</div>
